<template>
<transition name="el-fade-in-linear">
  <div class="transition-box" v-show="show">

    <!-- 背景视频 -->
    <div class="Vidage">
      <div class="Vidage__image">
        <img src="http://dev.kingyin.club:9000/cloud/2022225/背景图片/200G3103A8-1-1200.jpg" />
      </div>
      <video id="VidageVideo" class="Vidage__video" preload="metadata" loop autoplay muted :src="video">
      </video>
      <div class="Vidage__backdrop"></div>
    </div>

    <main class=" pt-50 pb-50 bg-img" v-loading="mainOp">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <!--author box-->
            <el-row :gutter="20">
              <div class="author-bio p-30 mt-50 border-radius-10 wow fadeIn animated">

                <el-col :span="20" style="height:220px;">
                  <div class="author-image mb-30">
                    <img :src="user.avater" alt="" class="avatar" />
                  </div>
                  <div class="author-info">
                    <h3 :class="
                    true
                      ? 'font-weight-900 text-white'
                      : 'font-weight-900 text-drak'
                  ">
                      <span class="vcard author">
                        <span class="fn">
                          <div style="white-space:nowrap;">
                            {{ user.nickname }}
                            <span :class="user.sex == 'MAN' ? 'text-info' : 'text-pink'"
                              style="white-space:nowrap;">{{ user.sex == 'MAN' ? "♂" : "♀" }}</span>
                          </div>
                        </span>
                      </span>
                    </h3>
                    <h5 :class="true ? 'text-white' : 'text-drak'">
                      ID：{{ user.id }}
                    </h5>
                    <p class="mt-10">
                      <vue-typer :text="signature" erase-style='backspace' :erase-delay='70' :type-delay='120'>
                      </vue-typer>
                    </p>

                  </div>
                </el-col>
                <el-col :span="4">
                  <button @click="editFans(user.id,-1,true)" v-if="user.status != 'SELF'"
                    :class="user.status == 'CLOSELY'?'btn btn-white font-small':'btn btn-info font-small'" style="width:82px;position: absolute;
        top: 50%;
        transform: translateY(-50%);">
                    {{friend(user.status)}}
                  </button>
                  <offence v-if="user.status != 'SELF' && user.status != 'CLOSELY' && user.status != 'CONCERNED'" style="float:right;" :user="user" :content="user.slogan" :target="user.id" type="主页"></offence>

                </el-col>

              </div>
            </el-row>
          </div>
        </div>
      </div>
    </main>

    <!--site-bottom-->
    <div class="site-bottom pt-10 pb-50 bg-white">
      <div class="archive-header pt-10 pb-10 bg-white">
        <div class="container">
          <h2 class="font-weight-900">{{user.nickname}}的主页</h2>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-md-6">
            <div class="widget-header-2 position-relative mb-30">
              <h5 class="mt-5 mb-30">博客发现</h5>
            </div>
            <div class="pagination-area mb-30 mt-20 wow fadeInUp animated">
              <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-start">
                  <li class="page-item"><i class="page-link"><i class="elegant-icon arrow_left"></i></i></li>
                  <li :class="option==2?'page-item active':'page-item'" @click="select(2)"><i class="page-link">帖子</i>
                  </li>
                  <li :class="option==3?'page-item active':'page-item'" @click="select(3)"><i class="page-link">评论</i>
                  </li>
                  
                  <!-- <li :class="option==5?'page-item active':'page-item'" @click="select(5)"><i class="page-link">历史</i>
                  </li> -->
                  <li v-if="user.status == 'SELF'" :class="option==6?'page-item active':'page-item'" @click="select(6)"><i class="page-link">我的</i>
                  </li>
                  <li class="page-item"><i class="page-link"><i class="elegant-icon arrow_right"></i></i></li>
                </ul>
              </nav>
            </div>
            <!-- 帖子 -->
            <artical-list v-if="option == 2" :id="id" :size="3" :status="0"></artical-list>
            <comments-list v-if="option == 3" :id="id" :size="4" :user="user"></comments-list>
            <artical-list v-if="option == 5" :id="id" :size="3" :status="2"></artical-list>
            <set v-if="option==6" :user="user" :video="video"></set>
          </div>
          <div class="col-lg-4 col-md-6" v-loading="mainOp">
            <div class="sidebar-widget widget-latest-posts mb-30 wow fadeInUp animated">
              <div class="widget-header-2 position-relative mb-30">
                <h5 class="mt-5 mb-30">关注列表</h5>
              </div>
              <el-empty v-if="likes.total == 0" description="'没有找到有关的内容'"></el-empty>
              <el-skeleton v-if="likes.total == 0">
            
          </el-skeleton>
              <div class="post-block-list">
                <ul class="list-post">

                  <li class="mb-30" v-for="(item, i) in likes.records" :key="i">
                    <div class="carausel-3-columns">
                      <div
                        class="carausel-3-columns-item d-flex bg-grey has-border p-25 hover-up-2 transition-normal border-radius-5">
                        <div
                          class="post-thumb post-thumb-64 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">
                          <a href="javascript:void(0)" @click="toWindod(item.id)" style="white-space:nowrap;">
                            <img :src="item.avater" alt="" />
                          </a>
                        </div>
                        <div class="post-content media-body position-relative" style="margin-right:74px">
                          <h6>
                            <a href="javascript:void(0)" @click="toWindod(item.id)" style="white-space:nowrap;"
                              :class="false ? 'text-white' : 'text-dark'">
                              {{ item.nickname }}
                            </a>
                            <span :class="item.sex == 'MAN' ? 'text-info' : 'text-pink'"
                              style="white-space:nowrap;">{{ item.sex == 'MAN' ? "♂" : "♀" }}</span>
                          </h6>
                          <p :class="
                    false ? 'text-white font-small' : 'text-dark font-small'
                  ">
                            {{item.slogan}}
                          </p>
                          <div style="float:right;" v-if="user.status == 'SELF'">
                            <button @click="editFans(item.id,i,true)"
                              :class="item.status == 'CLOSELY'?'btn btn-white font-small':'btn btn-info font-small'"
                              style="width:82px;position: absolute;
        top: 50%;
        transform: translateY(-50%);">
                              {{friend(item.status)}}
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="pagination-area mb-30 mt-20 wow fadeInUp animated">
                <nav aria-label="Page navigation example">
                  <el-pagination style="float:left;" layout="prev, pager, next" :total="likes.total"
                    :current-page="likes.current" @current-change="pageChangeLikes">
                  </el-pagination>
                </nav>
              </div>
            </div>
          </div>

        </div>
        <div class="sidebar-widget widget-latest-posts mb-30 mt-20 wow fadeInUp animated" v-loading="mainOp">

          <div class="widget-header-2 position-relative mb-30">
            <h5 class="mt-5 mb-30">我的粉丝</h5>
          </div>
          <el-empty v-if="fans.total == 0" description="'没有找到有关的内容'"></el-empty>
          
          <div class="row">
            <div :class="isMobile?'carausel-3-columns col-12':'carausel-3-columns col-6'"
              v-for="(item, i) in fans.records" :key="i">
              <div
                class="carausel-3-columns-item mb-10 d-flex bg-grey has-border p-25 hover-up-2 transition-normal border-radius-5">
                <div class="post-thumb post-thumb-64 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">
                  <a href="javascript:void(0)" @click="toWindod(item.id)" style="white-space:nowrap;">
                    <img :src="item.avater" alt="" />
                  </a>
                </div>
                <div class="post-content media-body position-relative" style="margin-right:74px">
                  <h6>
                    <a href="javascript:void(0)" @click="toWindod(item.id)"
                      :class="false ? 'text-white' : 'text-dark'">{{ item.nickname }}</a>
                    <span :class="item.sex == 'MAN' ? 'text-info' : 'text-pink'"
                      style="white-space:nowrap;">{{ item.sex == 'MAN' ? "♂" : "♀" }}</span>
                  </h6>
                  <p :class="
                    false ? 'text-white font-small' : 'text-dark font-small'
                  " style="margin-right:10px;">
                    {{item.slogan}}
                  </p>
                  <div style="float:right;" v-if="user.status == 'SELF'">
                    <button @click="editFans(item.id,i,false)"
                      :class="item.status == 'CLOSELY'?'btn btn-white font-small':'btn btn-info font-small'" style="width:82px;position: absolute;
        top: 50%;
        transform: translateY(-50%);">
                      {{friend(item.status)}}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>



          <div class="pagination-area mb-30 mt-20 wow fadeInUp animated">
            <nav aria-label="Page navigation example">
              <el-pagination style="float:left;" layout="prev, pager, next" :total="fans.total"
                :current-page="fans.current" @current-change="pageChangeFans">
              </el-pagination>
            </nav>
          </div>
        </div>
      </div>
      <!--container-->
    </div>

  </div>
  </transition>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import articalList from '@/components/module/article-list'
  import commentsList from '@/components/module/comments-list'
  import set from '@/components/module/set'
  import offence from './module/offence.vue'
  import bus from '../utils/bus.js'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      articalList,
      commentsList,
      set,
      offence
    },
    data() {
      //这里存放数据
      return {
        show:true,
        option: 2,
        mainOp: false,
        isMobile: this.$commons.isMobile(),
        user: {},
        signature: [],
        id: '',
        video: '',
        fans: [],
        likes: [],
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      async pageChangeFans(page) {
        this.mainOp = true;
        const pram = {
          page: {
            current: page,
            size: 4
          },
          userid: this.id
        }
        var res = await this.$$api.user.fansInfo(pram);
        this.fans = res.data;
        this.mainOp = false;
      },
      async pageChangeLikes(page) {
        this.mainOp = true;
        const pram = {
          page: {
            current: page,
            size: 4
          },
          userid: this.id
        }
        var res = await this.$$api.user.likesInfo(pram);
        this.likes = res.data;
        this.mainOp = false;
      },
      toWindod(data) {
        window.open("#/author/" + data);
      },
      showMain() {
        // 监听事件
        bus.$on('showMain', res => {
          if (res.name == 'router') {
            this.show = res.data;
            this.$forceUpdate()
          }

        })
      },
      friend(data) {
        switch (data) {
          case 'CONCERNED':
            return '已关注';
          case 'BE_CONCERNED':
            return '♥关注了你'
          case 'CLOSELY':
            return '❤互相关注';
          case 'NORMAL':
            return '+关注';
        }
      },
      message(data) {
        switch (data) {
          case 'CONCERNED':
            return '谢谢你的关注~';
          case 'BE_CONCERNED':
            return '我是你的粉丝哦~ 快来关注我吧，一起双向奔赴！';
          case 'CLOSELY':
            return '双向奔赴才是最有意义的';
          case 'NORMAL':
            return '恭喜你找到了我！';
          default:
            return '幽小灵持续喜欢中~';
        }
      },
      resMsg(data) {
        switch (data) {
          case 'CONCERNED':
            return '已关注';
          case 'CLOSELY':
            return '已互相关注';
          case 'NORMAL':
          case 'BE_CONCERNED':
            return '已取关';
        }
      },
      select(o) {
        this.option = o;
      },
      async editFans(data, idx, like) {
        this.mainOp = true;
        const pram = {
          userid: data
        }
        var res = await this.$api.user.changeFriend(pram);
        if (res.code == 20000) {
          Notiflix.Notify.Info(this.resMsg(res.data));
          if (idx == -1 && this.user.status != 'SELF')
            this.user.status = res.data;
          if (like && idx >= 0) {
            this.likes.records[idx].status = res.data;
          }
          if (!like && idx >= 0) {
            this.fans.records[idx].status = res.data;
          }
          this.signature = [this.message(this.user.status), this.user.slogan, 'BY KY-BLOG-PRO'];
        }
        this.mainOp = false;
      },
      async getUserDetail() {
        const pram = {
          userid: this.id,
        }
        var res = await this.$api.user.getDetail(pram)
        if (res.code == 20000) {
          this.user = res.data.user;
          this.fans = res.data.fans;
          this.likes = res.data.likes;
          this.video = res.data.video;
        } else {
          this.$router.push({
          name: 'home'
        })
        }
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    async mounted() {
      this.showMain();
      $("body").removeClass("canvas-opened");
      this.mainOp = true;
      this.id = this.$route.params.id
      await this.getUserDetail()
      $('body').removeClass("canvas-opened");
      new Vidage('#VidageVideo');
      this.signature = [this.message(this.user.status), this.user.slogan, 'BY KY-BLOG-PRO']
      this.mainOp = false;
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style>
  .vue-typer {
    font-family: monospace;
  }

  .vue-typer .custom.char.typed {
    color: #ffffff;
  }

  .vue-typer .custom.char.selected {
    color: #ffffff;
    background-color: transparent;
    text-decoration: line-through;
  }

  .vue-typer .custom.caret {
    display: none;
  }

</style>
